﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>仪表盘2</title>
    <script src="/Content/Scripts/jquery-1.8.3.min.js"></script>
    <script src="/Content/Scripts/highcharts/highcharts.js"></script>
    <script src="/Content/Scripts/highcharts/highcharts-more.js"></script>
    
    <script>
        $(function () {
            $('#container').highcharts({

                chart: {
                    type: 'gauge',
                    alignTicks: false,
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: '双坐标'
                },

                pane: {
                    startAngle: -150,
                    endAngle: 150
                },

                yAxis: [{
                    min: 0,
                    max: 200,
                    lineColor: '#339',
                    tickColor: '#339',
                    minorTickColor: '#339',
                    offset: -25,
                    lineWidth: 2,
                    labels: {
                        distance: -20,
                        rotation: 'auto'
                    },
                    tickLength: 5,
                    minorTickLength: 5,
                    endOnTick: false
                }, {
                    min: 0,
                    max: 124,
                    tickPosition: 'outside',
                    lineColor: '#933',
                    lineWidth: 2,
                    minorTickPosition: 'outside',
                    tickColor: '#933',
                    minorTickColor: '#933',
                    tickLength: 5,
                    minorTickLength: 5,
                    labels: {
                        distance: 12,
                        rotation: 'auto'
                    },
                    offset: -20,
                    endOnTick: false
                }],

                series: [{
                    name: '速度',
                    data: [80],
                    dataLabels: {
                        formatter: function () {
                            var kmh = this.y,
                                mph = Math.round(kmh * 0.621);
                            return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
                                '<span style="color:#933">' + mph + ' mph</span>';
                        },
                        backgroundColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, '#DDD'],
                                [1, '#FFF']
                            ]
                        }
                    },
                    tooltip: {
                        valueSuffix: ' km/h'
                    }
                }]

            },
         // Add some life
         function (chart) {
             setInterval(function () {
                 var point = chart.series[0].points[0],
                     newVal, inc = Math.round((Math.random() - 0.5) * 20);

                 newVal = point.y + inc;
                 if (newVal < 0 || newVal > 200) {
                     newVal = point.y - inc;
                 }

                 point.update(newVal);

             }, 3000);

         });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
